<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>让坦克开起来</title>
	<style type="text/css">
		input {
			font-size: 26px;
			margin-top: 20px;
		}

		body {
			background-image: url(images/grassland.png);
			overflow: hidden;
		}

		#mytank {
			position: absolute;
			left: 10px;
			top: 100px;
			transform: rotate(0);
			transition: transform .5s;
		}
	</style>
</head>

<body>
	<img id="mytank" src="images/right.png" />
	<script>
		//get element
		const tank = document.querySelector("#mytank");

		//arguments                         219970142张予菲
		let beginLeft = 10;
		let beginTop = 100;
		let beginToward = 1; // 1 right; 2 top; 3 left; 4 button
		let endToward = 1;
		let rotate = 0;

		// console.log(window.innerWidth, window.innerHeight);
		// console.log(tank.offsetWidth, tank.offsetHeight);

		//adding keydown event to tank
		window.addEventListener("keydown", (e) => {
			// console.log(tank.offsetLeft ,tank.offsetTop);
			let code = e.keyCode;
			switch (code) {
				// 'D'                                219970142张予菲
				case 68:
					//set rotate
					endToward = 1;
					rotate += changeToward(beginToward, endToward);
					beginToward = endToward;
					tank.style.transform = `rotate(${rotate}deg)`;
					//set move
					tank.style.left = `${beginLeft += 10}px`;
					//if tank exceed the boundray ,it will not move
					if (beginLeft > 0 && beginLeft < window.innerWidth - tank.offsetWidth) {
						break;
					} else {
						beginLeft = window.innerWidth - tank.offsetWidth;
					}
					break;
					// 'W'
				case 87:
					endToward = 2;
					rotate += changeToward(beginToward, endToward);
					beginToward = endToward;
					tank.style.transform = `rotate(${rotate}deg)`;
					tank.style.top = `${beginTop -= 10}px`;
					if (beginTop > 0 && beginTop < window.innerHeight - tank.offsetHeight) {
						break;
					} else {
						beginTop = 0;
					}
					break;
					// 'A'
				case 65:
					endToward = 3;
					rotate += changeToward(beginToward, endToward);
					beginToward = endToward;
					tank.style.transform = `rotate(${rotate}deg)`;
					tank.style.left = `${beginLeft -= 10}px`;
					if (beginLeft > 0 && beginLeft < window.innerWidth - tank.offsetWidth) {
						break;
					} else {
						beginLeft = 0;
					}
					break;
					// 'S'
				case 83:
					endToward = 4;
					rotate += changeToward(beginToward, endToward);
					beginToward = endToward;
					tank.style.transform = `rotate(${rotate}deg)`;
					tank.style.top = `${beginTop += 10}px`;
					if (beginTop > 0 && beginTop < window.innerHeight - tank.offsetHeight) {
						break;
					} else {
						beginTop = window.innerHeight - tank.offsetHeight;
					}
					break;
			}
		})

		//change toward
		function changeToward(a, b) {
			if (a - b == -1 || a - b == 3) {
				return -90;
			} else if (a - b == 1 || a - b == -3) {
				return 90;
			} else if (Math.abs(a - b) == 2) {
				return -180;
			} else {
				return 0;
			}
		}

		// right click prohibited
		document.addEventListener('contextmenu', (event) => {
			event.returnValue = false;
		})
	</script>
</body>

</html>